<template>
  <div style="padding:20px;" id="app">
    <div class="panel panel-primary">
      <div class="align-center">
  <el-form ref="form" :model="form" label-width="120px">
    <el-form-item label="数据源">
      <el-select v-model="form.sourceid" placeholder="请选择数据源"  style="margin-left: -280px; width:400px" @change="(val) => selectdb(val,1)" >
        <el-option  v-for="item in sourceinfolist" :label= "item.key" :key="item.value"  :value="item.value"  ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="db">
      <el-select v-model="form.dbname" placeholder="请选择db"  style="margin-left: -280px; width:400px" @change="(val) => selecttable(val,1)" >
        <el-option  v-for="item in sourcedblist" :label= "item.key" :key="item.value" :value="item.value"  ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="table">
      <el-select v-model="form.tablename" placeholder="请选择table"   style="margin-left: -280px; width:400px">
        <el-option  v-for="item in sourcetablelist" :label= "item.key" :key="item.value" :value="item.value"  ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="资源名称">
      <el-input v-model="form.resourcename" style=" margin-left: -230px; width:450px"></el-input>
    </el-form-item>
      <el-form-item label="共享类型">
        <el-select v-model="form.sharetype" placeholder="请选择共享类型"   style="margin-left: -280px; width:400px" >
          <el-option  v-for="item in sharetypelist" :label= "item.lable" :key="item.value" :value="item.value"  ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="共享方式">
        <el-select v-model="form.sharestyle" placeholder="请选择共享类型"   style="margin-left: -280px; width:400px" >
          <el-option  v-for="item in sharestylelist" :label= "item.lable" :key="item.value" :value="item.value"  ></el-option>
        </el-select>
      </el-form-item>
    <el-form-item label="资源所属部门">
      <el-input v-model="form.department" style=" margin-left: -230px; width:450px"></el-input>
    </el-form-item>
    <el-form-item style= "text-align: left;margin-left: 150px">
      <el-button type="primary" @click="onSubmit" >添 加</el-button>
    </el-form-item>
  </el-form>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
      data() {
        return {
          name: "test",
          sourceinfolist:[],
          sourcedblist:[],
          sourcetablelist:[],
          sharetypelist:[{"lable":"内部无条件共享","value":1},{"lable":"内部有条件共享","value":2},{"lable":"对外开发共享","value":3}],
          sharestylelist:[{"lable":"API服务","value":1}],
          form: {
            sourceid: '',
            dbname: '',
            tablename: '',
            resourcename: '',
            sharetype:1,
            sharestyle:1,
            department:''
          }
        }
      },
      methods: {

        onSubmit() {
          var _myvue = this
          console.log('submit!');
          this.$http.post('http://127.0.0.1:8091/dataResourceinfo/insertResourceInfo',
            {
              "sourceid":this.form.sourceid,
              "dbname":this.form.dbname,
              "tablename":this.form.tablename,
              "resourcename":this.form.resourcename,
              "sharetype":this.form.sharetype,
              "sharestyle":this.form.sharestyle,
              "department":this.form.department
            }
            ,{emulateJSON: true}).then((response) => {
              // if(response.bodyText = "success"){
                alert("添加成功")
            // if(this.form.dtype == 0){
            //   _myvue.$router.push({name:'mysqllistdatasourceinfo',params:{}})
            // }else if(this.form.dtype == 1){
            //   _myvue.$router.push({name:'hivelistdatasourceinfo',params:{}})
            // }else if(this.form.dtype == 2){
            //   _myvue.$router.push({name:'hbaselistdatasourceinfo',params:{}})
            // }else if (this.form.dtype == 3){
            //   _myvue.$router.push({name:'clickhouselistdatasourceinfo',params:{}})
            // }



          });
            // }

         },


        selectdb(value,flag){
          console.log(value,flag)
          this.$http.post('http://127.0.0.1:8091/datasource/findAlldb',
            {
              id:value
            }
            ,{emulateJSON: true}).then((response) => {
            if(flag == 1){
              this.sourcedblist = response.body
            }else if (flag == 2){
            }
          });
          console.log(value)

        },
        selecttable(value,flag){
          let id = this.form.sourceid
          if(flag == 2){
            id = this.targetinfo
          }

          this.$http.post('http://127.0.0.1:8091/datasource/findAlltable',
            {
              id:id,
              dname:value
            }
            ,{emulateJSON: true}).then((response) => {
            if(flag == 1){
              this.sourcetablelist = response.body
            }else if (flag == 2){
            }
          });
          console.log(value)

        }

       }
       ,
    created() {
      this.$http.post('http://127.0.0.1:8091/datasource/findAllDatainfo',
        {

        }
        ,{emulateJSON: true}).then((response) => {
        this. sourceinfolist = response.body
      });
    }
  }
</script>

<style type="text/css">
  .align-center{
    margin:0 auto;      /* 居中 这个是必须的，，其它的属性非必须 */
    width:1000px;        /* 给个宽度 顶到浏览器的两边就看不出居中效果了 */
    background:white;     /* 背景色 */
    text-align:center;  /* 文字等内容居中 */
  }
</style>
